<template>
	<view class="bg-white relative an-item" @click="handleDetails(item)">
		<view class="Grid Grid--center" style="border-bottom: 1px solid #F5F5F5; padding: 20rpx 22rpx;">
			<view class="Grid-cell Media Media--center Media--justifyCenter" style="width: 50%;">
				<!-- <u-image :src="" width="36rpx" height="36rpx" mode="aspectFill"
					style="margin: 0 auto;"></u-image> -->
				<view class="Media-body truncate text-sm" style="padding-left: 18rpx;">{{item.competition && item.competition.name}}</view>
			</view>
			<view class="text-xs" style="color: #999999;">开赛时间 {{item.match_time}}</view>
		</view>
		<view class="Grid Grid--center text-xs" style="padding: 30rpx 22rpx;">
			<view style="width: 40%;">
				<view v-if="item.home_team" class="Media Media--center Media--justifyCenter">
					<u-image :src="item.home_team.logo" width="36rpx" height="36rpx" mode="aspectFill"
						style="margin: 0 auto;"></u-image>
					<view class="Media-body truncate" style="padding-left: 18rpx;">{{item.home_team.team_name}}</view>
				</view>
				<view class="text-center" style="color: #0DA25F; padding: 10rpx 0;">VS</view>
				<view v-if="item.away_team" class="Media Media--center Media--justifyCenter">
					<u-image :src="item.away_team.logo" width="36rpx" height="36rpx" mode="aspectFill"
						style="margin: 0 auto;"></u-image>
					<view class="Media-body truncate" style="padding-left: 18rpx;">{{item.away_team.team_name}}</view>
				</view>
			</view>
			<view v-if="item.analysis" class="Grid-cell">
				<view v-if="item.analysis.spf" class="Grid Grid--center Grid--justifySpaceBetween Grid--1of4 text-center"
					style="margin-bottom: 4rpx;">
					<view class="Grid-cell" style="padding: 0 2rpx;">
						<view style="background-color: #F2F9F6; padding: 20rpx 10rpx">胜平负</view>
					</view>
					<!-- cp:初赔 ss:即时 -->
					<view class="Grid-cell" style="padding: 0 2rpx;">
						<view style="background-color: #F2F9F6; padding: 20rpx 10rpx">{{item.analysis.spf.cp && item.analysis.spf.cp.arr1 || '/'}}</view>
					</view>
					<view class="Grid-cell" style="padding: 0 2rpx;">
						<view style="background-color: #F2F9F6; padding: 20rpx 10rpx">{{item.analysis.spf.cp && item.analysis.spf.cp.arr2 || '/'}}</view>
					</view>
					<view class="Grid-cell" style="padding: 0 2rpx;">
						<view style="background-color: #F2F9F6; padding: 20rpx 10rpx">{{item.analysis.spf.cp && item.analysis.spf.cp.arr3 || '/'}}</view>
					</view>
				</view>
				<view class="Grid Grid--center Grid--justifySpaceBetween Grid--1of4 text-center">
					<view class="Grid-cell" style="padding: 0 2rpx;">
						<view style="background-color: #F2F9F6; padding: 20rpx 10rpx">大小球</view>
					</view>
					<!-- odds_cp:初赔 odds:即时 -->
					<view class="Grid-cell" style="padding: 0 2rpx;">
						<view style="background-color: #F2F9F6; padding: 20rpx 10rpx">{{item.odds_cp && item.odds_cp.arr1 || '/'}}</view>
					</view>
					<view class="Grid-cell" style="padding: 0 2rpx;">
						<view style="background-color: #F2F9F6; padding: 20rpx 10rpx">{{item.odds_cp && item.odds_cp.arr2 || '/'}}</view>
					</view>
					<view class="Grid-cell" style="padding: 0 2rpx;">
						<view style="background-color: #F2F9F6; padding: 20rpx 10rpx">{{item.odds_cp && item.odds_cp.arr3 || '/'}}</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="item.analysis" class="Grid Grid--center Grid--justifyCenter Grid--1of2 text-xs" style="padding: 0 22rpx 30rpx;">
			<view class="Grid-cell" style="padding: 0 12rpx 0 0;">
				<view class="Grid Grid--justifySpaceBetween"
					:style="{background: false ? '#EC602E' : 'linear-gradient( 90deg, rgba(5,183,103,.2) 0%, rgba(255,204,1,.2) 100%)', borderRadius: '30rpx', padding: '8rpx 20rpx'}">
					<view :style="{color: false ? '#ffffff' : '#0DA25F'}">胜平负分析</view>
					<view :style="{color: false ? '#ffffff' : '#E12424'}">{{item.analysis.spf && item.analysis.spf.ai_spf || '/'}}</view>
				</view>
			</view>
			<view v-if="item.analysis" class="Grid-cell" style="padding: 0 0 0 12rpx;">
				<view class="Grid Grid--justifySpaceBetween"
					style="background: linear-gradient( 90deg, rgba(5,183,103,.2) 0%, rgba(255,204,1,.2) 100%); border-radius: 30rpx; padding: 8rpx 20rpx;">
					<view style="color: #0DA25F;">最大可能进球区间</view>
					<view style="color: #E12424;">{{item.analysis.ainsmx && item.analysis.ainsmx.min}}-{{item.analysis.ainsmx && item.analysis.ainsmx.max}}</view>
				</view>
			</view>
		</view>
		<view style="width: 100%; height: 20rpx; background-color: #F5F5F5;"></view>
	</view>
</template>

<script>
	export default {
		name: 'Item',
		props: {
			item: {
				type: Object,
				default: () => {}
			}
		},
		methods: {
			handleClick(url) {
				uni.navigateTo({
					url
				})
			},
			handleDetails(item) {
				return
				uni.setStorageSync('detailsData', item);
				uni.navigateTo({
					url: `/pages/details/details?match_id=${this.item.match_id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
</style>